Shopping Cart

  • 1. Goal

  • 2. Create Project
    Create new project 
    
                        npm create vite@latest cms 

                        //select javascript option
    install packages 
                           

                        cd cms
                        npm install
    Run project 
         
                      
                        npm run dev
  • 3. Editor Setup

    1. click on extension icon in the editor ( ctrl+shift+X)

    2. search ES7 + React/Redux/React-Native Snippets

    3. press install button

  • 4. Install Packages
    1. icons 
    
                      npm install react-icons
    2. react route 
    
                    npm install react-router-dom
    3. http client : axios 
    
                      npm install axios
  • 5. CSS
    src/index.css

    clear the content

    src/App.css

    write the style here

    
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-color: #202020;
}

html {
  font-size: 62.5%;
  font-family: "urbanist";
}

body {
  background-color: black;
}

h1,
h2,
h3,
h4,
h5 {
  color: #fff;
}

p,
li,
a,
button {
  font-size: 1.7rem;
  letter-spacing: 0.1rem;
  line-height: 1.6;
  color: #fff;
}

li {
  list-style: none;
}

a {
  color: #000;

  &:hover {
    color: #2e86c1;
  }
}

button {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  padding: 0.6rem 2.4rem;
  text-align: center;
  outline: none;
  border: none;
  text-transform: unset;
  transition: all 0.3s ease-in-out;
  background: #202020;
  color: #fff;
  border-radius: 1.5rem;
  /*thisdoesn'twork*/
  border-width: 0.1rem;
  border-style: solid;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
  margin-top: 1.6rem;
}

/* Layout  */

.container {
  max-width: 140rem;
  margin: auto;
}

.grid {
  display: grid;
}

.grid-two-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid-three-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid-four-cols {
  grid-template-columns: repeat(4, 1fr);
}

/* Layout  */

header {
  height: 10rem;
  box-shadow: rgba(255, 255, 255, 0.3) 0px 10px 10px -10px;
  background-color: #202020;
  width: 100%;

  & .container {
    height: 10rem;
  }
}

.navbar-grid {
  grid-template-columns: 0.5fr 1fr;
  align-items: center;
  height: 10rem;
  padding: 0 3.2rem;
}

nav ul {
  display: flex;
  justify-content: flex-end;
  /* background-color: yellow; */
  gap: 3.2rem;
  color: #fff;

  & li a {
    color: #fff;
  }
}

.ham-menu {
  display: none;
}

/* media queries  */
@media  screen and (max-width: 998px) {
  .menu-web {
    display: none;
  }

  .ham-menu {
    display: flex;
    justify-content: flex-end;
  }

  .menu-mobile {
    position: absolute;
    top: 10rem;
    left: 0;
    background-color: #0d1212;
    width: 100%;
    box-shadow: rgba(255, 252, 252, 0.25) 0px 14px 28px;
  }

  .menu-mobile ul {
    display: flex;
    flex-direction: column;
    align-items: center;

    & li:first-child {
      margin-top: 1.2rem;
    }

    & li:last-child {
      margin-bottom: 1.2rem;
    }
  }
}

/* hero section  */

.hero-section .container {
  padding: 3.2rem;
  margin: 9rem auto;
  gap: 6.4rem;
}

.paragraph {
  margin: 3.2rem 0;
}

.heading-xl {
  font-family: inherit;
  font-size: clamp(5.2rem, 6vw, 4.241rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .banner-image {
  width: 100%;
}

@media  screen and (max-width: 990px) {
  .hero-content {
    order: 1;
  }

  .container .banner-image {
    width: 80%;
    order: 0;
  }
}

/* About Section  */

.section-about {
  margin: 0 auto 9rem auto;
}

.gradient-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.2rem;
}

@media  screen and (max-width: 991px) {
  .gradient-cards {
    grid-template-columns: 1fr;
  }
}

.container-title {
  text-align: center;
  padding: 0 !important;
  margin-bottom: 40px;
  font-size: 40px;
  color: #fff;
  font-weight: 600;
  line-height: 60px;
}

.card {
  max-width: 55rem;
  border: 0;
  width: 100%;
  margin-inline: auto;
}

.container-card {
  position: relative;
  border: 2px solid transparent;
  background: linear-gradient(71deg, #080509, #1a171c, #080509);
  background-clip: padding-box;
  border-radius: 45px;
  padding: 40px;
}

.bg-green-box,
.bg-white-box,
.bg-yellow-box,
.bg-blue-box {
  position: relative;
}

.bg-green-box::after,
.bg-white-box::after,
.bg-yellow-box::after,
.bg-blue-box::after {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  content: "";
  z-index: -1;
  border-radius: 45px;
}

.bg-green-box::after {
  background: linear-gradient(71deg, #0d1212, #3da077, #0d1212);
}

.bg-white-box::after {
  background: linear-gradient(71deg, #121013, #b0afb0, #121013);
}

.bg-yellow-box::after {
  background: linear-gradient(71deg, #110e0e, #afa220, #110e0e);
}

.bg-blue-box::after {
  background: linear-gradient(71deg, #0c0a0e, #5f6fad, #0c0a0e);
}

.card-title {
  font-weight: 600;
  color: white;
  letter-spacing: -0.02em;
  line-height: 40px;
  font-style: normal;
  font-size: 28px;
  padding-bottom: 8px;
}

.card-description {
  font-weight: 600;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  max-width: 470px;
}

/* footer CSS  */

.footer-contact {
  height: 10rem;
  display: flex;
  gap: 2.4rem;
  align-items: center;

  & .icon {
    color: #3a4ed5;
    font-size: 3.6rem;

    & .icon:nth-child(2) {
      rotate: 90deg;
    }
  }
}

.footer-contact-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;

  & p {
    font-size: 1.5rem;
    color: #757575;
  }

  & p:first-child {
    font-size: 1.7rem;
    font-weight: bold;
    color: #fff;
  }
}

.footer-menu {
  & ul {
    display: flex;
    justify-content: end;
  }
}

ul {
  margin: 0px;
  padding: 0px;
}
.footer-section {
  background: #151414;
  position: relative;
}

.copyright-area {
  background: #202020;
  padding: 25px 0;
}
.copyright-text p {
  margin: 0;
  font-size: 14px;
  color: #878787;
}
.copyright-text p a {
  color: #3a4ed5;
  margin-left: 0.6rem;
}
.footer-menu li {
  display: inline-block;
  margin-left: 20px;
}
.footer-menu li:hover a {
  color: #3a4ed5;
}
.footer-menu li a {
  font-size: 14px;
  color: #878787;
}

/* --------------- 
country Card 
------------------ */

.country-card {
  margin-top: 3.2rem;
}
.country-section {
  margin: 6.4rem auto 9.6rem auto;
  & .grid {
    gap: 3.2rem;
    max-width: 132rem;
    margin: auto;
  }

  & img {
    width: 100%;
    max-width: 50rem;
    height: 16rem;
  }
}

/* indivisual card container  */
.country-details-card {
  max-width: 100%;
  margin: 6.4rem auto;
  box-shadow: rgba(168, 163, 184, 0.15) 0px 48px 100px 0px;

  & .container-card {
    & .grid {
      align-items: center;
    }

    & img {
      width: 100%;
      max-width: 30rem;
      margin-bottom: 0;
      height: auto;
      justify-self: center;
      align-items: center;
      box-shadow: rgba(255, 255, 255, 0.1) 0px 48px 100px 0px;
    }
  }

  & .infoContainer {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  & .country-card-backBtn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.section-searchFilter {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.2rem;

  & .container-card {
    padding: 0.8rem 2.4rem;
    background: linear-gradient(71deg, #080509, #1a171c, #080509);
  }

  & input {
    font-family: "urbanist";
    font-size: 1.55rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.8);
    border: 0.05rem solid #fff;
    background: linear-gradient(71deg, #080509, #1a171c, #080509);
  }

  & .select-section {
    background: linear-gradient(71deg, #080509, #1a171c, #080509);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.6rem 2.4rem;
    border-radius: 5rem;
    -webkit-border-radius: 5rem;
    -moz-border-radius: 5rem;
    -ms-border-radius: 5rem;
    -o-border-radius: 5rem;
    font-family: "urbanist";
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-transform: capitalize;

    & option {
      background: linear-gradient(71deg, #080509, #1a171c, #080509);
      color: rgba(255, 255, 255, 0.8);
      padding: 0.6rem 2.4rem;
      border-radius: 5rem;
    }
  }

  & .select-section > option {
    background-color: #080509;
    color: rgba(255, 255, 255, 0.8);
    padding: 0.6rem 2.4rem;
    border-radius: 5rem;
    margin-top: 1rem;
  }
}

::placeholder {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------ 
contact us page 
--------------- */

.section-contact {
  margin: 9.6rem auto;

  & hr {
    border-color: rgba(255, 255, 255, 0.6);
  }
}
.contact-wrapper {
  display: flex;
  justify-content: center;

  & form {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    width: 100%;
    max-width: 48rem;

    & input,
    & textarea {
      font-family: "urbanist";
      background-color: #000;
      font-size: 1.6rem;
      color: #fff;
      outline: none;
      border: 0.1rem solid rgba(255, 255, 255, 0.4);
      padding: 1.2rem 1.6rem;
      border-radius: 0.3rem;
      -webkit-border-radius: 0.3rem;
      -moz-border-radius: 0.3rem;
      -ms-border-radius: 0.3rem;
      -o-border-radius: 0.3rem;
    }
  }
}

/* ----------------
contact us Page ends here 
--------------------- */

@media  screen and (max-width: 1320px) {
  .grid-four-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media  screen and (max-width: 980px) {
  .grid-four-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media  screen and (max-width: 760px) {
  .grid-four-cols,
  .grid-three-cols,
  .grid-two-cols {
    grid-template-columns: 1fr;
  }

  .grid--cols {
    grid-template-columns: 1fr;
  }
}

/* //Loader  */
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #25b09b;
  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes  l3 {
  to {
    transform: rotate(1turn);
  }
}

.loader-section {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    import in App.jsx

  • 6. UI Pages
    1. src/pages/Home.jsx 
    
                      import React from 'react'

                    const Home = () => {
                      return (
                        <div>Home</div>
                      )
                    }

                    export default Home
    2. src/pages/About.jsx 
    

                     import React from 'react'

                    const About = () => {
                      return (
                        <div>About</div>
                      )
                    }

                    export default About
    3. src/pages/Contact.jsx 
    

                     import React from 'react'

                    const Contact = () => {
                      return (
                        <div>Contact</div>
                      )
                    }

                    export default Contact
    4. src/pages/Country.jsx 
    

                     import React from 'react'

                    const Country = () => {
                      return (
                        <div>Country</div>
                      )
                    }

                    export default Country
  • 7. Router
    src/App.jsx 
    

                      import { createBrowserRouter, RouterProvider } from "react-router-dom";
                      

                      import "./App.css";

                      import  Home  from "./pages/Home";
                      import  About  from "./pages/About";
                      import  Country  from "./pages/Country";
                      import  Contact  from "./pages/Contact";
                     

                      const router = createBrowserRouter([
                        {
                          path: "/",
                          element: <Home />,                          
                        },

                        {
                          path: "/about",
                          element: <About />,                          
                        },

                        {
                          path: "/country",
                          element: <Country />,                          
                        },

                        {
                          path: "/contact",
                          element: <Contact />,                          
                        },

                      ]);

                      const App = () => {
                        return <RouterProvider router={router}> </RouterProvider>;
                      };

                      export default App;
    2. check routes 
    
                        http://localhost:5173/


                        http://localhost:5173/about 


                        http://localhost:5173/country


                        http://localhost:5173/contact
  • 8. Master layouts

    1. First master layout: Applayout.jsx

    1. create Applayout.jsx

    src/Layout/AppLayout.jsx

    
                import React from 'react'

                const AppLayout = () => {
                  return (
                    <div>AppLayout</div>
                  )
                }

                export default AppLayout
    2. usage of master layout

    src/App.jsx

    import AppLayout

    

                  
                import { createBrowserRouter, RouterProvider } from "react-router-dom";

                import  AppLayout  from "./Layout/AppLayout";

                import  Home  from './pages/Home';
                import  About  from './pages/About';
                import  Country  from './pages/Country';
                import  Contact  from './pages/Contact';
                

              const router = createBrowserRouter([
              {
                
                  path: '/',
                  element: <AppLayout />,
                  children: [
                    { path: '', element: <Home /> },
                    { path: 'about', element: <About /> },
                    { path: 'country', element: <Country /> },
                    { path: 'contact', element: <Contact /> },
                  ],
                }

              ]);

                const App = () => {
                  return <RouterProvider router={router}> </RouterProvider>;
                };

                export default App;
    3. check the routes 
    
                http://localhost:5173/


                http://localhost:5173/about 


                http://localhost:5173/country


                http://localhost:5173/contact

    2. Second master layout: AdminLayout.jsx

    src/Layout/AdminLayout.jsx

    
                import React from 'react'

                const AdminLayout = () => {
                  return (
                    <div>AdminLayout</div>
                  )
                }

                export default AdminLayout
    usage of AdminLayout

    create and import admin pages : Dashboard, Category, Products, Orders 

    

                  
                import { createBrowserRouter, RouterProvider } from "react-router-dom";
                import "./App.css";

                import  AppLayout  from "./Layout/AppLayout";
                import  AppLayout  from "./Layout/AdminpLayout";

                import  Home  from './pages/Home';
                import  About  from './pages/About';
                import  Country  from './pages/Country';
                import  Contact  from './pages/Contact';


                

              const router = createBrowserRouter([
              {
                
                  path: '/',
                  element: <AppLayout />,
                  children: [
                    { path: '', element: <Home /> },
                    { path: 'about', element: <About /> },
                    { path: 'country', element: <Country /> },
                    { path: 'contact', element: <Contact /> },
                  ],
                },

                 {
                
                  path: '/admin',
                  element: <AdminLayout />,
                  children: [
                    { path: '', element: <Dashboard /> },
                    { path: 'category', element: <Category /> },
                    { path: 'product', element: <Products /> },
                    { path: 'order', element: <Orders /> },
                  ],
                }


              ]);

                const App = () => {
                  return <RouterProvider router={router}> </RouterProvider>;
                };

                export default App;
    3. check the routes 
    
                http://localhost:5173/admin


                http://localhost:5173/admin/category 


                http://localhost:5173/admin/product


                http://localhost:5173/admin/order

    3. setup content placeholder in master pages

    Outlet is used to show the page content

    add Outlet to the master pages

    src/Layout/AppLayout.jsx

    

              import React from 'react'
              import { Outlet } from "react-router-dom";

              const AppLayout = () => {
                return (
                  <>
                      <div>App layout : Common for all pages</div>
                      <Outlet />
                  </>
                )
              }

              export default AppLayout
    3. check the routes 
    
                http://localhost:5173/


                http://localhost:5173/about 


                http://localhost:5173/country


                http://localhost:5173/contact

    4. Master layout UI

    1. add header

    src/Layout/AppLayout.jsx

    

              import React from 'react'
              import { Outlet } from "react-router-dom";
              import { NavLink } from "react-router-dom";


              const AppLayout = () => {
                return (
                  <>
                      <header>
                      <div className="container">
                          <div className="grid navbar-grid">
                          <div className="Logo">
                              <NavLink to="/">
                              <h1>WorldAtlas</h1>
                              </NavLink>
                          </div>

                          <nav >
                              <ul>
                              <li>
                                  <NavLink to="/">Home</NavLink>
                              </li>
                              <li>
                                  <NavLink to="/about">About</NavLink>
                              </li>
                              <li>
                                  <NavLink to="/country">Country</NavLink>
                              </li>
                              <li>
                                  <NavLink to="/contact">Contact</NavLink>
                              </li>
                              </ul>
                          </nav>

                        
                          </div>
                      </div>
                      </header>

                      <Outlet />

                  </>
                )
              }

              export default AppLayout
    2. add footer 
    

              import React from 'react'
import { Outlet } from "react-router-dom";
import { NavLink } from "react-router-dom";


const AppLayout = () => {
  return (
    <>
        <header>
        <div className="container">
            <div className="grid navbar-grid">
            <div className="Logo">
                <NavLink to="/">
                <h1>WorldAtlas</h1>
                </NavLink>
            </div>

            <nav >
                <ul>
                <li>
                    <NavLink to="/">Home</NavLink>
                </li>
                <li>
                    <NavLink to="/about">About</NavLink>
                </li>
                <li>
                    <NavLink to="/country">Country</NavLink>
                </li>
                <li>
                    <NavLink to="/contact">Contact</NavLink>
                </li>
                </ul>
            </nav>

          
            </div>
        </div>
        </header>

        
        <Outlet />

        <footer className="footer-section">
    

      <div className="copyright-area">
        <div className="container">
          <div className="grid grid-two-cols">
            <div className="copyright-text">
              <p>
                Copyright &copy; 2024, All Right Reserved
                <NavLink to="https://thapatechnical.shop/" target="_blank">
                  ThapaTechnical
                </NavLink>
              </p>
            </div>

            <div className="footer-menu">
              <ul>
                <li>
                  <NavLink to="/">Home</NavLink>
                </li>

                <li>
                  <NavLink
                    to="https://www.instagram.com/thapatechnical/"
                    target="_blank"
                  >
                    Social
                  </NavLink>
                </li>
                <li>
                  <NavLink
                    to="https://thapatechnical.shop/source-code"
                    target="_blank"
                  >
                    Source Code
                  </NavLink>
                </li>
                <li>
                  <NavLink to="/contact">Contact</NavLink>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>

    </>
  )
}

export default AppLayout
  • 9. Pages UI
    src/pages/Home.jsx 
    

                  import React from 'react'

const Home = () => {
  return (
    <section className="section-about container">
      <h2 className="container-title">
        Here are the Interesting Facts
        <br />
        we’re proud of
      </h2>

      <div className="gradient-cards">
       
          
            <div className="card" key="1" >
              <div className="container-card bg-blue-box">
                <p className="card-title">Country 1</p>
                <p>
                  <span className="card-description">Capital:</span>
                  Capital 1
                </p>
                <p>
                  <span className="card-description">Population:</span>
                  Population 1
                </p>
                <p>
                  <span className="card-description">Interesting Fact:</span>
                 123
                </p>
              </div>
            </div>



            <div className="card" key="2" >
              <div className="container-card bg-blue-box">
                <p className="card-title">Country 2</p>
                <p>
                  <span className="card-description">Capital:</span>
                  Capital 2
                </p>
                <p>
                  <span className="card-description">Population:</span>
                  Population 2
                </p>
                <p>
                  <span className="card-description">Interesting Fact:</span>
                 123
                </p>
              </div>
            </div>



            <div className="card" key="3" >
              <div className="container-card bg-blue-box">
                <p className="card-title">Country 3</p>
                <p>
                  <span className="card-description">Capital:</span>
                  Capital 3
                </p>
                <p>
                  <span className="card-description">Population:</span>
                  Population 3
                </p>
                <p>
                  <span className="card-description">Interesting Fact:</span>
                 123
                </p>
              </div>
            </div>


          
       
      </div>
    </section>
  )
};

export default Home
    2. src/pages/Contact.jsx 
    

import React from 'react'

const Contact = () => {
  return (
    <section className="section-contact">
      <h2 className="container-title">Contact Us</h2>

      <div className="contact-wrapper container">
        <form >
          <input
            type="text"
            className="form-control"
            placeholder="enter your name"
            name="username"
            required
            autoComplete="off"
          />

          <input
            type="email"
            className="form-control"
            placeholder="Enter you email"
            name="email"
            required
            autoComplete="off"
          />

          <textarea
            className="form-control"
            rows="10"
            placeholder="Enter your message"
            name="message"
            required
            autoComplete="off"
          ></textarea>

          <button type="submit" value="send">
            Send
          </button>
        </form>
      </div>
    </section>
  )
}

export default Contact
    3. src/pages/Country.jsx 
    

import React from 'react'
import { NavLink } from "react-router-dom";

const Country = () => {
  return (
      <section className="country-section">
          <ul className="grid grid-four-cols">


              <li className="country-card  card ">
                    <div className="container-card bg-white-box">
                      <img src="https://flagcdn.com/do.svg" />

                      <div className="countryInfo">
                        <p className="card-title">
                         Dominican Republic
                        </p>
                        <p>
                          <span className="card-description">Population:</span>
                          2332121332
                        </p>
                        <p>
                          <span className="card-description">Region:</span> Americas
                        </p>
                        <p>
                          <span className="card-description">Capital:</span>
                          Georgetown
                        </p>

                        <NavLink to={`/country/1`}>
                          <button>Read More</button>
                        </NavLink>
                      </div>
                    </div>
                  </li>


                  <li className="country-card  card ">
                    <div className="container-card bg-white-box">
                      <img src="https://flagcdn.com/do.svg" />

                      <div className="countryInfo">
                        <p className="card-title">
                         Dominican Republic
                        </p>
                        <p>
                          <span className="card-description">Population:</span>
                          2332121332
                        </p>
                        <p>
                          <span className="card-description">Region:</span> Americas
                        </p>
                        <p>
                          <span className="card-description">Capital:</span>
                          Georgetown
                        </p>

                        <NavLink to={`/country/1`}>
                          <button>Read More</button>
                        </NavLink>
                      </div>
                    </div>
                  </li>


                  <li className="country-card  card ">
                    <div className="container-card bg-white-box">
                      <img src="https://flagcdn.com/do.svg" />

                      <div className="countryInfo">
                        <p className="card-title">
                         Dominican Republic
                        </p>
                        <p>
                          <span className="card-description">Population:</span>
                          2332121332
                        </p>
                        <p>
                          <span className="card-description">Region:</span> Americas
                        </p>
                        <p>
                          <span className="card-description">Capital:</span>
                          Georgetown
                        </p>

                        <NavLink to={`/country/1`}>
                          <button>Read More</button>
                        </NavLink>
                      </div>
                    </div>
                  </li>

                  

                  <li className="country-card  card ">
                    <div className="container-card bg-white-box">
                      <img src="https://flagcdn.com/do.svg" />

                      <div className="countryInfo">
                        <p className="card-title">
                         Dominican Republic
                        </p>
                        <p>
                          <span className="card-description">Population:</span>
                          2332121332
                        </p>
                        <p>
                          <span className="card-description">Region:</span> Americas
                        </p>
                        <p>
                          <span className="card-description">Capital:</span>
                          Georgetown
                        </p>

                        <NavLink to={`/country/1`}>
                          <button>Read More</button>
                        </NavLink>
                      </div>
                    </div>
                  </li>

          </ul>  
      </section>
  )
}

export default Country